<template>
  <div id="asyncRoutesConfigForm">
    <div class="div">
      <el-form ref="routesForm" :model="routesForm" label-width="150px" class="selectForm" :rules="rules">


        <el-form-item label="类型" prop="type">
          <el-select v-model="routesForm.type" placeholder="请选择" :clearable="true" @change="clearData()">
            <el-option label="一级菜单" :value=1 v-if="showRule.id === 0 || showRule.parentId === 0"></el-option>
            <el-option label="二级菜单" :value=2></el-option>
            <el-option label="路由按钮" :value=3></el-option>
            <el-option label="普通按钮" :value=4></el-option>
          </el-select>
        </el-form-item>

        <template v-if="routesForm.type">
          <el-form-item label="标题名称" prop="titleName">
            <el-input v-model="routesForm.titleName" placeholder="中文名称"></el-input>
          </el-form-item>

          <template v-if="routesForm.type !== 4">
            <el-form-item label="路由名称" prop="routeName">
              <el-input v-model="routesForm.routeName" placeholder="英文名称"></el-input>
            </el-form-item>

            <template v-if="routesForm.type === 1 || routesForm.type === 2">
              <el-form-item label="菜单图标名" prop="iconName">
                <BMSIcon v-model="routesForm.iconName" />
              </el-form-item>
            </template>

            <el-form-item label="路由(url)" prop="url">
              <el-input v-model="routesForm.url" placeholder="必须以 ' / ' 开头"></el-input>
            </el-form-item>

            <template v-if="routesForm.type !== 1">
              <el-form-item label="vue组件(component)" prop="component">
                <el-input v-model="routesForm.component" placeholder="组件位于src下路径,例如: main/main.vue"></el-input>
              </el-form-item>
            </template>
          </template>

          <el-form-item label="权限码" prop="permissionCode">
            <el-input v-model="routesForm.permissionCode"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm('routesForm')">提交</el-button>
            <el-button type="warning" @click="resetForm('routesForm')">重置</el-button>
            <el-button @click="returnForm()">返回</el-button>
          </el-form-item>
        </template>
      </el-form>
    </div>
  </div>
</template>

<script>
import {
  checkRouteName,checkTitleName
} from '@/assets/request/api.js';
import BMSIcon from '@/components/component/common/bmsIcon.vue';
export default {
  name: 'asyncRoutesConfigForm',
  props: ['routesInfo','showRule'],
  components: { BMSIcon },
  data() {
    var validateTitleName = (rule, value, callback) => {
      if(value === '') {
        callback(new Error("请输入标题名称"))
      }
      let id = ""
      if(this.operation !== 'insert') {
        id = this.routesForm.id
      }
      checkTitleName(value,id).then(res => {
        callback()
      }).catch(err => {
        callback(new Error(err.message))
      })
    };
    var validateRouteName = (rule, value, callback) => {
      if(value === '') {
        callback(new Error("请输入路由名称"))
      }
      let id = ""
      if(this.operation !== 'insert') {
        id = this.routesForm.id
      }
      checkRouteName(value,id).then(res => {
        callback()
      }).catch(err => {
        callback(new Error(err.message))
      })
    };
    return {
      operation: 'insert',
      routesForm: {
        id: '',
        type: '',
        titleName: '',
        routeName: '',
        iconName: '',
        url: '',
        component: '',
        parentId: '',
        permissionCode: '',
        orderBy: 10,
        version: ''
      },
      rules: {
        type: [
          { required: true, message: '请选择菜单类型', trigger: 'blur' },
        ],
        titleName: [
          { required: true, validator: validateTitleName, trigger: 'blur' },
        ],
        routeName: [
          { required: true, validator: validateRouteName, trigger: 'blur' },
        ],
        url: [
          { required: true, message: '请输入路由地址', trigger: 'blur' },
        ],
        component: [
          { required: true, message: '请输入路由地址', trigger: 'blur' },
        ]
      }
    };
  },
  methods: {
    changeIcon(icon) {
      this.routesForm.iconName = icon
    },
    clearData() {
      this.routesForm.titleName = ''
      this.routesForm.routeName = ''
      this.routesForm.iconName = ''
      this.routesForm.url = ''
      this.routesForm.component = ''
      this.routesForm.permissionCode = ''
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 将内容 返回给 父组件， 让他自己去做
          this.$emit("submitRoutesConfig",this.routesForm);
        } else {
          this.$message({
            message: '请检查表单内容',
            type: 'error'
          });
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    returnForm() {
      this.$router.go(-1)
    }
  },
  watch: {
    routesInfo : {
      handler(newValue) {
        this.routesForm = newValue
        this.operation = 'update'
      }
    }
  }
  
}
</script>

<style scoped lang="scss">


#asyncRoutesConfigForm {
  display: flex;
	justify-content: center;
  .div {
    margin-top: 20px;
    display: inline-block;
  }
}


.el-button {
  line-height: 0px;
  height: 32px;
  padding: 12px;
  font-size: 2px;
  border-radius: 20px;
}

.el-input , .el-select { 

  /deep/ .el-input__inner {
    height: 32px;
    font-size: 13px;
    box-shadow: none;
    width: 400px;
    border: 1px solid #e9e9e9;
    border-radius: 20px;
  }
  
}

.selectForm /deep/ .el-form-item__label {
  font-size: 12px;
}
 
</style>
